<template>
<!-- 各种按钮 -->

<!-- 第一张图表 -->
<el-card class="box-card">
	<template #header>
		<div class="card-header">
			<span>供应商/领用方 金额占比</span>
		</div>
	</template>
	<DataPicture1></DataPicture1>
</el-card>

<!-- 第二张图表 -->
<el-card class="box-card">
	<template #header>
		<div class="card-header">
			<span>出入库金额趋势</span>
		</div>
	</template>
	<DataPicture2></DataPicture2>
</el-card>

<!-- 第三张图表 -->
<el-card class="box-card">
	<template #header>
		<div class="card-header">
			<span>出入库金额趋势</span>
		</div>
	</template>
	<DataPicture3></DataPicture3>
</el-card>

</template>

<script setup lang="ts">
import {use} from "echarts/core";
import {CanvasRenderer} from "echarts/renderers";
import {PieChart, BarChart, LineChart} from "echarts/charts";
import {
	TitleComponent,
	TooltipComponent,
	LegendComponent,
	GridComponent,
	DataZoomComponent,
	ToolboxComponent,
} from "echarts/components";
use([
	CanvasRenderer,
	PieChart,
	TitleComponent,
	TooltipComponent,
	LegendComponent,
	GridComponent,
	BarChart,
	DataZoomComponent,
	ToolboxComponent,
	LineChart,
]);

import DataPicture1 from "@/page/first/DataAnalysis1/DataPicture1.vue";
import DataPicture2 from "@/page/first/DataAnalysis1/DataPicture2.vue";
import DataPicture3 from "@/page/first/DataAnalysis1/DataPicture3.vue";

// provide(THEME_KEY, "dark");

</script>

<style scoped>
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.box-card {
	margin-top: 20px;
}
</style>
